/**
 * Created by Administrator on 2017/4/25.
 */
var Password = require('../../../../src/libs/password');
var FormItem = require('../../../../src/libs/form-item');
var AccountInfo = React.createClass({
    getDefaultProps:function(){
        return{
            data: {
                realName: "",
                phoneNum: "",
                ownPwd: ""
            }
        }
    },
    showLayer: function(ref){
        var div = document.createElement("div");
        div.id = "grey-background";
        document.body.appendChild(div);
        this.refs[ref].style.display = "block";
        this.refs[ref].style.left = "50%";
        this.refs[ref].style.top = "50%";
        this.refs[ref].style.marginTop = -(this.refs[ref].offsetHeight/2)+"px";
        this.refs[ref].style.marginLeft = -(this.refs[ref].offsetWidth/2)+"px";
    },
    hideLayer: function(ref){
        this.refs[ref].style.display = "none";
        document.body.removeChild(document.getElementById("grey-background"));
    },
    /*登录密码修改弹窗 获取短信验证码按钮*/
    _getCoce:function(pm,ref){
        var PageDM = window.PageDM;
        var count = PageDM[pm].count;
        if(PageDM[pm].onClick()){
            var _node = this.refs[ref];
            _node.className = "btn btn-code btn-code-disabled";
            _node.innerHTML = count + "秒后重新获取";
            _node.disabled = true;
            var time = setInterval(function(){
                if(count > 0){
                    count--;
                    _node.innerHTML = count + "秒后重新获取";
                }else{
                    clearInterval(time);
                    _node.className = "btn btn-code ucs-btn";
                    _node.innerHTML = "获取验证码";
                    _node.disabled = false;
                }
            },1000);
        }
    },
    /*登录密码弹窗 确认按钮*/
    closeWindow:function(){
        var PageDM = window.PageDM;
        var _validate = PageDM.btn.onClick();
        //console.log(this)
        if(_validate){
            this.hideLayer("layer-change-password");
        }
    },
    render: function(){
        var _this = this;
        return (
            <div className="my-info">
                <div className="title-account"><span>账号信息</span></div>
                <div className="item">
                    <div className="list">
                        <i className="iconfont icon-user"></i>
                        <span className="fc-light name">企业名称：</span>
                        <span className="fc-dark">{_this.props.data.realName?_this.props.data.realName:"您还未进行"}</span>
                        <a href="javascript:;" className="fc-link open-bank-layer">融资登记</a>
                    </div>
                    <div className="list">
                        <i className="iconfont icon-mobile"></i>
                        <span className="fc-light name">手<em></em>机：</span>
                        <span className="fc-dark">{_this.props.data.phoneNum?_this.props.data.phoneNum:"未绑定"}</span>
                    </div>
                    <div className="list">
                        <i className="iconfont icon-password"></i>
                        <span className="fc-light name">登录密码：</span>
                        <span className="fc-dark">{_this.props.data.ownPwd ? "******" : "未设置"}</span>
                        <a href="javascript:;" className="fc-link open-layer" data-action="layer-change-password" onclick={_this.showLayer.bind(_this,"layer-change-password")}>修改</a>
                    </div>
                </div>
                <div className="alert-layer layer-change-password" ref="layer-change-password">
                    <a href="javascript:;" className="close alert-close bg-icon" onclick={_this.hideLayer.bind(_this,"layer-change-password")}>X</a>
                    <div className="alert-title"><b></b>修改密码<b></b></div>
                    <div className="alert-content">
                        <div className="form">
                            <FormItem label={PageDM.loginPwd.label} id={PageDM.loginPwd.id} dmbind={PageDM.loginPwd.dmbind}>
                                <Password className="ucs-input" name={PageDM.loginPwd.name} placeholder={PageDM.loginPwd.placeholder} dmbind={PageDM.loginPwd.dmbind}/>
                            </FormItem>
                            <FormItem label={PageDM.newPwd.label} id={PageDM.newPwd.id} dmbind={PageDM.newPwd.dmbind}>
                                <Password className="ucs-input" name={PageDM.newPwd.name} placeholder={PageDM.newPwd.placeholder} dmbind={PageDM.newPwd.dmbind}/>
                            </FormItem>
                            <FormItem label={PageDM.newPwd2.label} id={PageDM.newPwd2.id} dmbind={PageDM.newPwd2.dmbind}>
                                <Password className="ucs-input" name={PageDM.newPwd2.name} placeholder={PageDM.newPwd2.placeholder} dmbind={PageDM.newPwd2.dmbind}/>
                            </FormItem>
                            <FormItem label={PageDM.phoneCode.label} id={PageDM.phoneCode.id} name={PageDM.phoneCode.name} dmbind={PageDM.phoneCode.dmbind}>
                                <input id={PageDM.phoneCode.id} name={PageDM.phoneCode.name} className="ucs-input ucs-input-code" placeholder={PageDM.phoneCode.placeholder} value={PageDM.phoneCode.value} dmbind={PageDM.phoneCode.dmbind}/>
                                <button id={PageDM.getBtnCode.id} ref="getcode" name={PageDM.getBtnCode.name} className="btn-code btn ucs-btn" onclick={_this._getCoce.bind(_this,"getBtnCode","getcode")}>获取验证码</button>
                            </FormItem>
                            <div className="alert-button">
                                <input type="button" className="btn btn-confirm" value="确认" onclick={_this.closeWindow.bind(_this)}/>
                                <input type="button" className="btn btn-cancel close" value="取消" onclick={_this.hideLayer.bind(_this,"layer-change-password")}/>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="alert-layer layer-verified-ok">
                    <a href="javascript:;" className="close alert-close bg-icon">X</a>
                    <div className="alert-title"><b></b>温馨提示<b></b></div>
                    <div className="alert-content">
                        <p className="tips">身份信息一经认证后将不能再次修改，请确认无误！</p>
                        <p className="fs30">夏飞飞</p>
                        <p className="fs30">421023198802022234</p>
                        <div className="alert-button">
                            <input type="button" value="确认无误" className="btn btn-confirm" />
                            <input type="button" value="取消修改" className="btn btn-cancel close" />
                        </div>
                    </div>
                </div>
            </div>
        )
    }
});
module.exports = AccountInfo;